import { useImageStore } from '@/domain/correction/hooks/image';
import { computed, defineComponent, onMounted, onUnmounted, reactive, Ref, ref, toRaw } from 'vue';
import { Popup, Slider, NumberKeyboard, Field, Stepper } from 'vant';
import BHeader from './bottomHeader';
import { EMarkType, ESubmitType } from '@/domain/correction/types/jobs/homeWork';
import { useCurrectStdStore } from '@/domain/correction/hooks/currectStd';
import { AnswersTestID } from '@/domain/correction/types';
export default defineComponent({
  name: 'markd',
  setup() {
    const ele = ref(null);
    const show = ref(true);
    const customValue = ref(0);
    const baseValue = ref(0);
    const customValueTextNum = ref(0);
    const baseValueTextNum = ref(0);
    const currentTestID = computed(() => store.state.currentSubject?.test_id);
    const setCValue = (value: number) => {
      baseValue.value = value;
      if (currentTestID.value) {
        baseValueTextNum.value = value;
        store.state.markStatusInfo[currentTestID.value] = { markType: EMarkType.base, markNum: 0 };
      }
    };
    const isBaseComponent = ref(true);
    //业务
    const store = useCurrectStdStore();
    const imgstore = useImageStore();

    const markInfo = computed(() => store.getMarkStatus());

    const activeManage = computed(() => imgstore.state.activeImageManages?.im);
    onMounted(() => {
      if (markInfo.value.markType === EMarkType.base) {
        baseValueTextNum.value = currentTestID.value ? store.state.markStatusInfo[currentTestID.value].markNum : 0;
      } else {
        customValueTextNum.value = currentTestID.value ? store.state.markStatusInfo[currentTestID.value].markNum : 0;
      }
      changeCurrentMarkHandel((value) => {
        if (markInfo.value.markType === EMarkType.base) {
          baseValue.value = value;
        } else {
          customValue.value = value;
        }
      });
    });
    const changeCurrentMarkHandel = (fn: (value: number) => void, value?: number) => {
      const stdinfo = store.state.currentSubject;
      const plist = (store.state.submitType === ESubmitType.frist ? store.state.reqJobCorrectParam : store.state.reqRevisalParam)?.correct_infos?.filter(
        (v) => v.id === store.state.currentSubject?.id
      );
      if (plist && plist.length > 0) {
        plist.forEach((p) => {
          const vlist = p.test_infos?.filter((val) => val.test_id == stdinfo?.test_id);
          p.test_infos?.forEach((node) => {
            if (node.test_id == stdinfo?.test_id) {
              if (typeof value !== 'undefined') {
                node.stu_score = node.test_score > value ? node.test_score - value : 0;
              }
              if (node.stu_score) {
                fn(node.test_score - node.stu_score);
              } else {
                //默认0分
                fn(0);
              }
            }
          });
        });
      }
    };

    const sumbit = () => {
      if (markInfo.value.markType === EMarkType.base) {
        store.state.markStatusInfo[currentTestID.value!].markNum = baseValue.value;
      } else {
        store.state.markStatusInfo[currentTestID.value!].markNum = customValue.value;
      }
      changeCurrentMarkHandel(() => {}, markInfo.value.markType === EMarkType.base ? baseValue.value : customValue.value);

      show.value = false;
      activeManage.value?.flyback();
    };
    const Custom = () => (
      <div class={' w-full h-r2.85  mt-5'}>
        <div class={'w-full text-r1.4 h-r2.85 flex  px-5 leading-r2.6'}>
          <span class={'leading-r3'}>自定义</span>
          <span class={'flex-1 py-5  px-5 text-r1.4 overflow-hidden  leading-r2.6  ml-2'}>
            {' '}
            <Slider
              max={30}
              min={0}
              v-model={customValue.value}
              onChange={(val) => {
                customValueTextNum.value = val;
                store.state.markStatusInfo[currentTestID.value!] = { markType: EMarkType.custom, markNum: 0 };
              }}
            ></Slider>
          </span>
          <Stepper
            max={30}
            min={0}
            integer={true}
            disable-input={true}
            class={'flex-none text-r1.4   rounded-lg leading-r2.6 text-center'}
            v-model={customValue.value}
            onChange={(val) => {
              customValueTextNum.value = val;
              store.state.markStatusInfo[currentTestID.value!] = { markType: EMarkType.custom, markNum: 0 };
            }}
          ></Stepper>
          <span class={'flex-none w-r2.3 rounded-lg text-r1.4  leading-r3 text-center'}>分</span>
        </div>
      </div>
    );
    const Base = () => (
      <div class={' w-full h-r6.3 mt-5'}>
        <div class={'w-full h-r2.85 flex'}>
          <span class={'flex-none  px-5 text-r1.4 leading-r2.6'}>分数</span>
          <div
            class={'flex-1 flex p-1 text-gray-400 text-opacity-50  px-5 mx-5  text-r1.2 leading-r2.4 bg-gray-150 rounded-3xl text-center'}
            style={{ backgroundColor: '#F2F2F2' }}
          >
            <span
              class={
                'flex-1' +
                (baseValueTextNum.value === 1 && markInfo.value.markType === EMarkType.base ? '  bg-white text-gray-600 rounded-3xl text-opacity-100' : '')
              }
              onClick={() => setCValue(1)}
            >
              1分
            </span>
            <span
              class={
                'flex-1' +
                (baseValueTextNum.value === 2 && markInfo.value.markType === EMarkType.base ? '  bg-white text-gray-600 rounded-3xl text-opacity-100' : '')
              }
              onClick={() => setCValue(2)}
            >
              2分
            </span>
            <span
              class={
                'flex-1' +
                (baseValueTextNum.value === 3 && markInfo.value.markType === EMarkType.base ? ' bg-white text-gray-600 rounded-3xl text-opacity-100' : '')
              }
              onClick={() => setCValue(3)}
            >
              3分
            </span>
            <span
              class={
                'flex-1' +
                (baseValueTextNum.value === 4 && markInfo.value.markType === EMarkType.base ? '  bg-white text-gray-600 rounded-3xl text-opacity-100' : '')
              }
              onClick={() => setCValue(4)}
            >
              4分
            </span>
            <span
              class={
                'flex-1' +
                (baseValueTextNum.value === 5 && markInfo.value.markType === EMarkType.base ? ' bg-white text-gray-600 rounded-3xl text-opacity-100' : '')
              }
              onClick={() => setCValue(5)}
            >
              5分
            </span>
            <span
              class={
                'flex-1' +
                (baseValueTextNum.value === 10 && markInfo.value.markType === EMarkType.base ? '  bg-white text-gray-600 rounded-3xl text-opacity-100' : '')
              }
              onClick={() => setCValue(10)}
            >
              10分
            </span>
            <span
              class={
                'flex-1' +
                (baseValueTextNum.value === 15 && markInfo.value.markType === EMarkType.base ? ' bg-white text-gray-600 rounded-3xl text-opacity-100' : '')
              }
              onClick={() => setCValue(15)}
            >
              15分
            </span>
          </div>
        </div>
        <div class={'w-full h-r2.85 flex border-t border-solid border-gray-100 my-5'}>
          <span class={'flex-none  px-5 text-r1.4 leading-r2.6'}>自定义</span>
          <span class={'flex-1  px-5 text-r1.4 leading-r2.6'}></span>
          <span class={'flex-none  px-5 text-r1.4 leading-r2.6'}>
            {markInfo.value.markType === EMarkType.custom ? customValueTextNum.value : ''}分
            <i
              class={'iconfont icon-jinru1 inline-block text-center w-r2.3 h-r2.85 text-r1.4 leading-r2.6 opacity-50'}
              onClick={() => {
                isBaseComponent.value = false;
                if (markInfo.value.markType === EMarkType.custom) {
                  customValue.value = markInfo.value.markNum;
                }
              }}
            ></i>
          </span>
        </div>
      </div>
    );

    return () => (
      <Popup ref={ele} position="bottom" show={show.value} style={{ height: '30%' }}>
        {isBaseComponent.value ? <Base /> : <Custom />}
        <BHeader
          name={'打分'}
          cannel={() => {
            if (!isBaseComponent.value) {
              isBaseComponent.value = true;
              return false;
            } else {
              show.value = false;
              activeManage.value?.flyback();
              return true;
            }
          }}
          ok={sumbit}
        ></BHeader>
      </Popup>
    );
  }
});
